<template>
    <!-- 生命周期 -->
    <p id="msg">{{ message }}</p>
</template>
<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
const message = ref('Hello World')
onBeforeMount(() => {
    // 挂载之前，只是处理各种数据，还没有完成DOM结构渲染
    // 一般在这里初始化获取服务端的数据
    console.log('p:' + document.getElementById('msg')) // null
    console.log('message:' + message.value)
})
onMounted(() => {
    // 挂载完成：即当前vue组件的DOM结构渲染完成
    console.log('p:' + document.getElementById('msg')) // 已存在
    console.log('message:' + message.value)
})

</script>
<style scoped>
    
</style>